const h = (tag, props, children) => {
  // vnode 就是一个js对象
  return {
    tag,
    props,
    children,
  };
};
const mount = (vnode, container) => {
  const el = (vnode.el = document.createElement(vnode.tag));
  // 判断有无props   是否有class或者监听事件
  if (vnode.props) {
    for (const key in vnode.props) {
      const value = vnode.props[key];
      if (key.startsWith("on")) {
        el.addEventListener(key.slice(2).toLowerCase(), value);
      } else {
        el.setAttribute(key, value);
      }
    }
  }

  // 判断children 是字符串还是数组   如果是字符串就直接赋值元素的innerHTML
  // 否则就进行递归
  if (typeof vnode.children == "string") {
    el.innerHTML = vnode.children;
  } else {
    vnode.children.forEach((v, i) => {
      mount(v, el);
    });
  }
  container.appendChild(el);
};

// n1旧的vnode  n2新的vnode
const patch = (n1, n2) => {
  console.log(n1, n2);
  // 如果最外层的元素都不相同  则直接移除旧的，挂载新的
  if (n1.tag !== n2.tag) {
    const n1elParent = n1.el.parentElement;
    n1elParent.removeChild(n1.el);
    mount(n2, n1elParent);
  } else {
    const el = (n2.el = n1.el);
    //处理props
    const oldProps = n1.props || {};
    const newProps = n2.props || {};
    if (Object.keys(newProps).length > 0) {
      for (const key in newProps) {
        // 如果props相同
        // const val1 = n1.props[key];
        const val2 = n2.props[key];
        if (key.startsWith("on")) {
          el.addEventListener(key.slice(2).toLowerCase(), val2);
        } else {
          el.setAttribute(key, val2);
        }
      }
    }
    // 处理children
    let oldChildren = n1.children;
    let newChildren = n2.children;
    // 如果是个字符串  则直接进行赋值
    if (typeof newChildren == "string") {
      n1.el.textContent = newChildren;
    } else {
      if(oldChildren.length>newChildren.length)
    }
  }
};
